<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div class="layout w-full h-full box-border bg-white p-[20px]">
        <!-- 筛选区域 -->
        <div class="search box-border pb-[20px]">
          <a-row>
            <a-col :span="12">
              <span class="flex justify-start items-center">
                <a-input class="search-item" v-model="filterData.code" placeholder="请输入资产编号搜索" style="width: 328px"
                  allow-clear @blur="getTableData" @clear="getTableData">
                  <template #suffix>
                    <a-link type="primary">
                      <icon-search @click="getTableData" class="cursor-pointer" />
                    </a-link>
                  </template>
                </a-input>
                <a-button class="ml-2 bg-[#E5EFFE!important] cursor-pointer" @click="moreFilterKey = !moreFilterKey">
                  <template #icon>
                    <icon-filter style="color: #1459fa" />
                  </template>
                </a-button>
              </span>
            </a-col>
            <a-col :span="12" class="flex justify-end">
              <a-button type="primary" @click="updateReport"> 上传报告 </a-button>
            </a-col>
          </a-row>
          <div
            class="more-fliter-box w-full h-[80px] mt-[20px] mb-0 p-[20px] pl-[10px] pr-[10px] box-border bg-[#F7F9FC]"
            v-if="moreFilterKey">
            <a-row class="w-full h-[40px] overflow-hidden" style="align-items: center;" justify="center">
              <a-col :span="6">
                <a-input class="search-item" v-model="filterData.name" placeholder="请输入报告名称" allow-clear
                  @change="getTableData">
                  <template #prefix> 报告名称 </template>
                </a-input>
              </a-col>
              <a-col :span="6">
                <a-select class="search-item" v-model="filterData.conclusion" placeholder="请选择合规结论" allow-clear
                  @change="getTableData">
                  <template #prefix> 合规结论 </template>
                  <a-option :value="1">合规异常</a-option>
                  <a-option :value="2">资产合规</a-option>
                </a-select>
              </a-col>
              <a-col :span="6">
                <a-range-picker class="search-item" v-model="filterData.dateRange" @change="getTableData"
                  style="width: 100%">
                  <template #prefix> 上传日期 </template>
                </a-range-picker>
              </a-col>
              <a-col :span="6">
                <a-link @click="resetFilter">重置</a-link>
              </a-col>
            </a-row>
          </div>
        </div>
        <!-- 表格区域 -->
        <div class="table-box w-full overflow-hidden" :style="{
          height: 'auto',
          maxHeight: moreFilterKey ? 'calc(100% - 192px)' : 'calc(100% - 92px)'
        }">
          <CommonTable :tableData="listData" :columnsData="columns" :operatorData="operatorData" :pageTotal="page.total"
            :operatorCollapse="2" @handlerOperator="handlerOperator" @handlerPaginationChange="handlerPaginationChange">
            <template #status="{ record }">
              {{ record.status === 1 ? '合规异常' : '资产合规' }}
            </template>
          </CommonTable>
        </div>
      </div>
    </template>
  </PageMain>
  <a-modal v-model:visible="removePopKey" title-align="start" class="chunk-delete-box" width="448px">
    <template #title>
      <span class="confirm-pop">是否确认删除该资源</span>
    </template>
    <div class="chunk-delete-info-box info-pop">
      <icon-exclamation-circle-fill class=" text-yellow-500" />
      删除后该资源无法恢复
    </div>
    <template #footer>
      <div class="w-full h-full flex justify-end items-center">
        <a-button @click="removePopKey = false">取消</a-button>
        <a-button type="primary" class="ml-2" @click="toRemove">删除</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { columns, operatorData } from './values'
import { useRouter } from 'vue-router';
import {apiList} from '@/api/assetManagement/resourceTraceability/index'
const router = useRouter()

const filterData = ref({
  code: '',
  name: '',
  conclusion: '',
  dateRange: [],
})

const page = ref({
  page: 1,
  page_size: 10,
  total: 0
});
const moreFilterKey = ref(false); // 更多筛选

const removePopKey = ref(false); // 删除弹窗

const currentRow = ref({}); // 当前行数据

// table表格数据
const listData = ref([
  {
    id: 1,
    code: '20210801',
    name: '报告名称1',
    conclusion: '合规异常',
    date: '2021-08-01',
    uploader: '根管理员',
    status: 1,
  },
  {
    id: 2,
    code: '20210802',
    name: '报告名称2',
    conclusion: '资产合规',
    date: '2021-08-02',
    uploader: '根管理员',
    status: 2,
  },
  {
    id: 3,
    code: '20210803',
    name: '报告名称3',
    conclusion: '合规异常',
    date: '2021-08-03',
    uploader: '根管理员',
    status: 3,
  },
  {
    id: 4,
    code: '20210804',
    name: '报告名称4',
    conclusion: '资产合规',
    date: '2021-08-04',
    uploader: '根管理员',
    status: 1,
  },
  {
    id: 5,
    code: '20210805',
    name: '报告名称5',
    conclusion: '合规异常',
    date: '2021-08-05',
    uploader: '根管理员',
    status: 2,
  },
  {
    id: 6,
    code: '20210806',
    name: '报告名称6',
    conclusion: '资产合规',
    date: '2021-08-06',
    uploader: '根管理员',
    status: 3,
  },
  {
    id: 7,
    code: '20210807',
    name: '报告名称7',
    conclusion: '合规异常',
    date: '2021-08-07',
    uploader: '根管理员',
    status: 1,
  },
  {
    id: 8,
    code: '20210808',
    name: '报告名称8',
    conclusion: '资产合规',
    date: '2021-08-08',
    uploader: '根管理员',
    status: 2,
  },
  {
    id: 9,
    code: '20210809',
    name: '报告名称9',
    conclusion: '合规异常',
    date: '2021-08-09',
    uploader: '根管理员',
    status: 3,
  },
]);

/* 获取数据列表 */
const getTableData = async() => {
  const data = await apiList({})
}

/* 重置 */
const resetFilter = () => {
  filterData.value = {
    code: '',
    name: '',
    conclusion: '',
    dateRange: [],
  }
  page.value.page = 1
  getTableData()
}

/* 上传报告 */
const updateReport = () => {
  router.push({
    name: 'uploadReport'
  })
}

/* 列表操作 */
const handlerOperator = (record: any, key: any) => {
  console.log(record, key)
  if (key.label == '查看关联') {
    resourceView(record)
  } else if (key.label == '权属编辑') {
    resourceDelete(record)
    alert(1)
  }
}

/* 查看报告 */
const resourceView = (record: Object) => {
  router.push({
    name: 'bloodDetail',
    query: {
      id: record.id
    }
  })
}

/* 删除 */
const resourceDelete = (record: Object) => {
  router.push({
    name: 'ownership'
  })
}
/* 确认删除 */
const toRemove = () => {
  listData.value = listData.value.filter(item => item.id !== currentRow.value.id)
  removePopKey.value = false;
}

/* 分页方法 */
const handlerPaginationChange = (page: number, pageSize: number) => {
  console.log(page, pageSize)
}

onMounted(() => {
  getTableData()
})
</script>

<style lang="less" scope>
// @import '../index.less';
</style>